<template>
  <div>
    <entity-item-box
      @deleteChunks="deleteChunks"
      class="box-posi"
      :count="count"
      @state="state"
      v-if="isReady"
      :labels="complexLabelList"
      :text="currentDoc.text"
      :entities="currentDoc.annotations"
      :delete-annotation="removeEntity"
      :update-entity="updateEntity"
      :add-entity="addEntity"
      :radio="radio"
      :documentId="currentDoc"
      :item="item"
      :status="status"
      :writeStatus="writeStatus"
    />
    <label-header
      @changeFlag="changeFlag"
      @getBigLabel="getLabel"
      ref="labelheader"
      v-if="isReady"
      :labels="items"
      :text="currentDoc.text"
      :currentId="currentDoc"
      :entities="currentDoc.annotations"
      :delete-annotation="removeEntity"
      :update-entity="updateEntity"
      :add-entity="addEntity"
      :topLevel="topLevelLabelList"
      :isChoose="isChoose"
      @changeItem="changeItem"
      @radioId="radioId"
      :bigData="bigData"
      :chunks="chunks"
      @chooseStatus="chooseStatus"
      @changeWriteButton="changeWriteButton"
    ></label-header>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import LabelService from '@/services/label.service'
// import UserService from '@/services/user.service.js'
import EntityItemBox from '~/components/organisms/annotation/EntityItemBox'
import labelHeader from '~/components/organisms/annotation/labelHeader'
export default {
  components: {
    EntityItemBox,
    labelHeader
  },
  data() {
    return {
      isLabel: null,
      isChoose: [],
      count: null,
      radio: null,
      bigData: null,
      dataLabel: [],
      // 批量刪除
      chunks: [],
      item: {},
      // 判断初始化是否选中红色按钮的状态
      status: true,
      // 判断初始化是否选中红色按钮的状态
      writeStatus: false
    }
  },
  computed: {
    ...mapState('labels', [
      'items',
      'loading',
      'complexLabelList',
      'topLevelLabelList',
      'normalLabelList'
    ]),
    ...mapState('documents', { documentLoading: 'loading' }),
    ...mapGetters('documents', ['currentDoc']),
    isReady() {
      return !!this.currentDoc && !this.loading && !this.documentLoading
    }
  },
  updated() {},
  async fetch() {
    this.getComplexLabelList()
    this.getTopLevelLabelList()
    this.getLabelList({
      projectId: this.$route.params.id
    })
    // 复杂分类
    // const label = await LabelService.getComplexLabelList()
    // this.dataLabel = Array.from(label.data)
    // 大分类
    const dataBig = await LabelService.getLabelsBig()
    this.bigData = dataBig.data.data
    localStorage.removeItem('topLevela')
    localStorage.removeItem('CHANGETOPLEVEL')
  },

  methods: {
    ...mapActions('labels', [
      'getLabelList',
      'getComplexLabelList',
      'getTopLevelLabelList',
      'getNormalLabelList',
      'getUserLabelsNumber'
    ]),
    ...mapActions('documents', [
      'getDocumentList',
      'deleteAnnotation',
      'updateAnnotation',
      'addAnnotation'
    ]),
    ...mapMutations('documents', ['setLoading']),
    // 判断修改状态改变白色按钮
    changeWriteButton(data) {
      this.writeStatus = data
    },
    // 判断初始化是否选中红色按钮的状态
    chooseStatus(data) {
      this.status = data
    },
    // 判断是否点击了下面不让他点上面
    changeFlag(data) {
      this.item = data
      console.log(this.item)
    },
    // 批量刪除chunks
    deleteChunks(data) {
      this.chunks = data
      console.log(this.chunks)
    },
    changeItem(data) {
      this.count = data
    },
    radioId(data) {
      this.radio = data
    },
    state(data) {
      this.isChoose = data
    },
    getLabel(data) {
      this.isLabel = data
    },
    removeEntity(annotationId) {
      const payload = {
        annotationId,
        projectId: this.$route.params.id
      }
      this.deleteAnnotation(payload)
    },
    updateEntity(labelId, annotationId) {
      const payload = {
        annotationId,
        label: labelId,
        projectId: this.$route.params.id
      }
      this.updateAnnotation(payload)
    },
    // 添加一级分类标注
    addEntity(startOffset, endOffset, labelId) {
      const payload = {
        start_offset: startOffset,
        end_offset: endOffset,
        label: labelId,
        projectId: this.$route.params.id,
        // label_id1: this.radio === 0 ? null : this.radio
        label_id1: null
      }
      console.log('************ level one ' + payload)
      this.addAnnotation(payload)
    }
  }
}
</script>
<style scoped>
</style>
